<template>
    <div class="tableWrapper">
        <el-row>
          <el-form :model="searchForm" :inline="true" class="search" label-width="85px">
            <el-form-item class="first">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDefData">添加列配置</el-button>
            </el-form-item>
            <el-form-item label="关键字">
              <el-input class="keywords" size="mini" v-model="searchForm.keySearch" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item label="列是否排序" class="select">
              <el-select v-model="searchForm.sortable" size="mini">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否可见" class="select">
              <el-select v-model="searchForm.visiable" size="mini">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="getDefPage" icon="el-icon-search">查询</el-button>
              <el-button size="mini" type="primary" @click="reset" icon="el-icon-refresh-right">重置</el-button>
              <el-button size="mini" type="primary" @click="refresh" icon="el-icon-refresh">更新</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <div class="tableDiv">
          <el-table :data="defData" border style="width: 100%;" height="100%" v-loading="loading">
            <el-table-column prop="field" align="center" label="列属性" min-width="160">
            </el-table-column>
            <el-table-column prop="title" align="center" label="列名称" min-width="160">
            </el-table-column>
            <el-table-column prop="minWidth" align="center" label="最小列宽" min-width="160">
            </el-table-column>
            <el-table-column prop="align" align="center" label="对齐方式" min-width="160">
            </el-table-column>
            <el-table-column prop="fixed" align="center" label="固定方位" min-width="160">
            </el-table-column>                    
            <el-table-column label="列是否排序" min-width="100" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.sortable == 1">是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="格式化类型" min-width="160">
              <template slot-scope="scope">
                <span>{{scope.row.formatType | formatTypeFilter}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="formatValue" align="center" label="格式化参数" min-width="160">
            </el-table-column>
            <el-table-column label="是否可见" min-width="100" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.visiable == 1">是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="sortOrder" align="center" label="排序" min-width="100">
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleEditDef(scope.row)"></el-button>
                <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDeleteDef(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-show="!loading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchForm.current" :page-size="searchForm.size" :page-sizes="[10, 20, 40, 80]" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>

        <AddDefData :propAddData="propAddData" @updateDefDataList="updateDefDataList"></AddDefData>
        <EditDefData :propEditData="propEditData" @updateDefDataList="updateDefDataList"></EditDefData>
    </div>
</template>
<script>
import { deleteDefColumn, getDefColumnList, updateDefColumnUser } from '@/api/tools/columnInfo.js';
import AddDefData from './AddDefData.vue';
import EditDefData from './EditDefData.vue';
export default {
    data() {
      return {
        tableId: '',
        tableName: '',
        searchForm: {
          keySearch: '',
          sortable: null,
          visiable: null,
          tableCode: '',
          current: 1,
          size: 10
        },
        defData: [],
        total: 0,
        loading: false,
        propAddData: { // 传给添加字典组件的值
          defDataDialogFormVisible: false,
          tableCode: '',
          len: 0,
          tableName: ''
        },
        propEditData: { // 传给编辑字典组件的值
          defDataDialogFormVisible: false,
          tableCode: '',
          id: '',
          tableName: ''
        }
      }
    },
    components: {
      AddDefData,
      EditDefData
    },
    props: {
      propData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propData: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal) {
            const that = this
            that.searchForm.tableCode = newVal.tableCode
            that.tableId = newVal.id
            that.tableName = newVal.tableName
            if (newVal.id) {
              that.getDefList()
            } else {
              that.reset()
            }
          }
        }
      }
    },
    methods: {
      /** 查询 */
      getDefPage() {
        this.getDefList()
      },
      
      /** 重置 */
      reset() {
        const that = this
        that.searchForm.keySearch = ''
        that.searchForm.sortable = null
        that.searchForm.visiable = null
        that.searchForm.size = 10
        that.searchForm.current = 1
        that.getDefList()
      },

      /** 刷新 */
      refresh() {
        const that = this
        if (!that.searchForm.tableCode) {
          that.$message.warning('请先选择列表')
          return false
        }
        that.$confirm('是否确定更新吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateDefColumnUser(that.searchForm.tableCode).then(res => {
            if (res.code == 0) {
              that.getDefList()
              that.$message.success('更新成功')
            } else {
              that.$message.error(res.message)
            }
          })
        })
      },

      /** 获取列配置列表 */
      getDefList() {
        const that = this
        if (that.searchForm.tableCode) {
          that.loading = true
          getDefColumnList(that.searchForm).then(res => {
            if (res.code == 0) {
              that.defData = res.data.records
              that.total = res.data.total
              that.loading = false
            } else {
              that.$message.error(res.message)
            }
          })
        } else {
          that.defData = []
          that.total = 0
        }
      },

      /** 添加列配置 */
      handleAddDefData() {
        const that = this
        if (!that.searchForm.tableCode) {
          that.$message.warning('请先选择列表')
          return false
        }
        let propAddData = {
          defDataDialogFormVisible: true,
          tableCode: that.searchForm.tableCode,
          len: that.total + 1,
          tableName: that.tableName
        }
        that.propAddData = JSON.parse(JSON.stringify(propAddData))
      },

      /** 编辑列配置 */
      handleEditDef(row) {
        const that = this
        let propEditData = {
          defDataDialogFormVisible: true,
          tableCode: row.tableCode,
          id: row.id,
          tableName: that.tableName
        }
        that.propEditData = JSON.parse(JSON.stringify(propEditData))
      },

      /** 删除列配置 */
      handleDeleteDef(row) {
        const that = this
        that.$confirm('是否确定删除该列配置吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDefColumn(row.id).then(res => {
              if (res.code == 0) {              
                  that.getDefList()                          
                  that.$message.success('删除成功')
              } else {
                  that.$message.error(res.message)
              }
          })
        })
      },

      /** 添加列配置组件和编辑列配置组件回传更新列配置列表 */
      updateDefDataList() {
        const that = this
        that.getDefList()
      },

      /** 改变每页条数 */
      handleSizeChange(val) {
        const that = this
        that.searchForm.size = val
        that.getDefList()
      },

      /** 改变页数 */
      handleCurrentChange(val) {
        const that = this
        that.searchForm.current = val
        that.getDefList()
      }
    },
    filters: {
      formatTypeFilter(val) {
        if (val == 'DECIMAL') {
          return '数字'
        } else if (val == 'DATE') {
          return '日期'
        } else if (val == 'DATETIME') {
          return '时间'
        } else if (val == 'DICT') {
          return '字典'
        } else {
          return ''
        }
      }
    }
}
</script>
<style lang="scss" scoped>
.tableWrapper {
  height: 100%;
}
.tableDiv {
  padding-top: 2px;
  height: calc(100% - 84px)
}

.select /deep/ .el-input--small .el-input__inner {
  width: 90px;
}
.pagination-container {
  padding-top: 6px;
  text-align: center;
}
.tableDiv /deep/ .el-table th.gutter {
  display: block !important;
  width: 17px !important;
}
.tableWrapper /deep/ .keywords {
  width: 120px;
}
.tableWrapper /deep/ .el-form--inline .el-form-item {
  margin-right: 5px;
}
.tableWrapper /deep/ .el-form--inline .first {
  margin-right: 0px;
}
.select /deep/ .el-input--small .el-input__inner {
  width: 90px;
}
/deep/ .el-form--inline .first {
  margin-right: 20px;
}
.search /deep/ .el-form-item {
  margin-bottom: 7px;
  margin-top: -6px;
}
.search /deep/ .el-form-item__label {
  line-height: 41px;
}
.search /deep/ .el-input--mini .el-input__inner {
  width: 120px;
}
.search /deep/ .el-input--suffix .el-input__inner {
  width: 90px;
}
</style>